<template>
  <view>
    <view class="container-main">
      <view class="flex-between flex-align-items" style="margin-bottom: 24rpx;">
        <view class="notice-list flex-between flex-align-items" @click="toPath(`/pagesA/notice/list`)">
          <image :src="`${config.imgPath}/home/notice.png`"></image>
          <swiper circular vertical>
            <swiper-item v-for="(item, index) in noticeList" :key="index" class="notice-item ellipsis font-24-M">{{item.title}}</swiper-item>
          </swiper>
          <uni-icons type="right" size="16" color="#999"></uni-icons>
        </view>
        <picker mode="multiSelector" :range="regionList" range-key="name" @columnchange="bindRegionColumnchange" @change="bindRegionChange" @click="bindPickerInit">
          <view class="location-picker flex flex-align-items">
            <image :src="`${config.imgPath}/location.png`"></image>
            <text class="location-picker-label font-36-B ellipsis">
              {{ promotionLocalForm.city ? promotionLocalForm.city : '区域选择' }}
            </text>
          </view>
        </picker>
      </view>

      <swiper v-if="bannerList.length > 0" class="banner-list" circular autoplay>
        <swiper-item v-for="item in bannerList" :key="item.l_id" class="flex" @click="goto(item)">
          <image :src="item.image"></image>
        </swiper-item>
      </swiper>

      <view class="home-img-menu flex-between flex-column flex-wrap">
        <image v-for="(item, index) in homeImgMenu" :key="index" :src="item.img" @click="toPath(item.path)">
        </image>
      </view>

      <view class="home-img-text-menu flex-between flex-wrap">
        <view v-for="(item, index) in homeImgTextMenu" :key="index" class="flex-center flex-column flex-align-items" @click="toPath(item.path)">
          <image :src="item.img"></image>
          <text class="font-24-M">{{item.label}}</text>
        </view>
      </view>

      <view v-if="false" class="flex home-legal-advice" @click="toPath('/pagesA/home/legalAdvice')">
        <image :src="`${config.imgPath}/legal-advice/home-legal-advice.png`"></image>
      </view>

      <view v-if="starLawyerList.length > 0" class="title flex-between flex-align-items">
        <view class="font-36-B">明星律师</view>
        <view class="more flex flex-align-items" @click="toPath('/pagesA/lawyer/starList')">
          <text class="more-label font-24-M">更多</text>
          <uni-icons type="right" size="16" color="#BBB"></uni-icons>
        </view>
      </view>

      <scroll-view v-if="starLawyerList.length > 0" scroll-x class="star-lawyer-list">
        <view v-for="item in starLawyerList" :key="item.id" class="star-lawyer-item" @click="toPath(`/pagesA/lawyer/detail?id=${item.id}`)">
          <view class="star-lawyer-img">
            <image :src="item.avatar"></image>
            <text class="star-lawyer-city font-24-B bg-main">{{item.city}}</text>
          </view>
          <view class="star-lawyer-name font-28-B">{{item.name}}</view>
          <view class="star-lawyer-desc flex-between flex-align-items">
            <view class="star-lawyer-desc-left font-24-M">职业年限{{item.year}}年</view>
            <view class="star-lawyer-desc-right font-24-B flex">
              ￥<view class="font-36-B">{{item.min_service_fee}}<text class="font-22-B">起</text></view>
            </view>
          </view>
        </view>
      </scroll-view>

      <view v-if="dailyStudyList.length > 0" class="title flex-between flex-align-items">
        <!-- <view class="font-36-B">本地明律</view> -->
        <view class="font-36-B">法律看点</view>
        <view class="more flex flex-align-items" @click="toPath('/pagesA/lawyer/dailyStudy')">
          <text class="more-label font-24-M">更多</text>
          <uni-icons type="right" size="16" color="#BBB"></uni-icons>
        </view>
        <!-- <u-section style="width: 100%; font-size: 36rpx;" title="今日热门" sub-title="更多" :show-line="false" font-size="36rpx"></u-section> -->
      </view>

      <view v-if="dailyStudyList.length > 0" class="lawyer-list">
        <view v-for="item in dailyStudyList" :key="item.id" class="lawyer-item flex-between" @click="toPath(`/pagesA/lawyer/dailyStudyDetail?id=${item.id}`)">
          <image v-if="item.image" :src="item.image" class="lawyer-avatar"></image>
          <view class="lawyer-info flex-between flex-column">
            <view class="lawyer-name flex flex-align-items font-28">
              {{item.title}}
            </view>
            <view class="lawyer-name flex">
              <view class="lawyer-name font-24-b flex date-st">
                {{item.createtime}}
              </view>
              <!-- <view class="lawyer-name font-24-b flex date-st right-st">
                {{item.read_num}}阅读
              </view> -->
            </view>
          </view>
        </view>
      </view>

      <!-- <view v-if="lawyerList.length > 0" class="lawyer-list">
        <view v-for="item in lawyerList" :key="item.id" class="lawyer-item flex-between" @click="toPath(`/pagesA/lawyer/detail?id=${item.id}`)">
          <image :src="item.avatar" class="lawyer-avatar"></image>
          <view class="lawyer-info flex-between flex-column">
            <view class="lawyer-name flex flex-align-items font-32-B">
              {{item.name}} <text class="font-20-M">{{item.city}}</text>
            </view>
            <view class="lawyer-life font-24-M">职业年限{{item.year}}年</view>
            <view class="lawyer-price font-24-B flex">
              ￥<view class="font-36-B">{{item.min_service_fee}}<text class="font-22-B">起</text></view>
            </view>
          </view>
          <image :src="`${config.imgPath}/home/chat.png`" class="lawyer-consult"></image>
        </view>
      </view> -->
    </view>

    <!-- <x-img-modal v-model="contractObj.isShow" :showTitle="contractObj.showTitle" :showBotton="contractObj.showBotton" :title="contractObj.title" @confirm="confirm" @cancel="cancel" :cancelText="contractObj.cancelText" :confirmText="contractObj.confirmText" :canColse="true">
      <template>
        <image class="img-st" src="https://api.v2.zzlssc.cn/storage/images/63724ae6e999c.png"></image>
      </template>
    </x-img-modal> -->

  </view>
</template>

<script setup>
import {
  onLoad,
  onShow,
  onReachBottom,
  onPullDownRefresh,
  onShareAppMessage
} from '@dcloudio/uni-app';
import {
  ref
} from 'vue';
import {
  homeImgMenu,
  homeImgTextMenu
} from '@/const/index.js';
import api from '@/api/index.js';
import getLocation from '@/js/getLocation.js';
import handleJumpToChat from '@/js/handleJumpToChat.js';
import config from '@/js/config.js';

onShareAppMessage(() => { });
const contractObj = ref(
  {
    isShow: true,
    title: '',
    content: '',
    showTitle: false,
    showBotton: false,
    cancelText: 'AI审核',
    confirmText: '人工审核'
  }
);
const userInfo = ref({
  vip: {
    individual: 0,
    corporate: 0
  }
});
const regionList = ref([]);
const city = ref(null);
const noticeList = ref([]);
const bannerList = ref([]);
const starLawyerList = ref([]);
const promotionLocalForm = ref({
  city: null,
  page: 1,
  page_size: 10,
  last_page: 0
});
const newForm = ref({
  // type: null,
  page: 1,
  page_size: 10,
  last_page: 0
});

const lawyerList = ref([]);

const dailyStudyList = ref([]);
// 初始化
const init = () => {
  if (!uni.getStorageSync('editLocation')) {
    getLocation().then(res => {
      console.log(res)
      console.log('---------')
      promotionLocalForm.value.city = res.city;
      // promotionLocalForm.value.page = 1;
      // queryPromotionLocal();
    }).catch(() => {
      // queryPromotionLocal();
    });
  } else {
    // queryPromotionLocal();
  }
  userInfo.value = uni.getStorageSync('userinfo')
  getNews();
  if (uni.getStorageSync('token')) {
    getUserInfo();
  }
  getNoticeList();
  getBanner();
  queryPromotionRound();
}
// 用户端及律师端个人基本信息
const getUserInfo = () => {
  api.my.getUserInfo().then(res => {
    console.log(res)
    uni.setStorageSync('userinfo', res);
    userInfo.value = res;
  });
}
// 获取省市区
const getArea = () => {
  api.base.getArea().then(res => {
    regionList.value = [res, res[0].children];
  });
}
// 获取公告列表
const getNoticeList = () => {
  api.news.getNoticeList({
    page: 1,
    page_size: 1
  }).then(res => {
    noticeList.value = res.data.length > 0 ? res.data : [{
      title: '平台公告'
    }];
  });
}
// 获取轮播图
const getBanner = () => {
  api.base.getBanner({
    postion: 1
  }).then(res => {
    bannerList.value = res;
  });
}
// 多行文本框初始化
const bindPickerInit = () => {
  regionList.value[1] = regionList.value[0][0].children;
}
// 地区选择列改变
const bindRegionColumnchange = e => {
  if (e.detail.column === 0) {
    regionList.value[1] = regionList.value[0][e.detail.value].children;
  }
}
// 切换区域
const bindRegionChange = e => {
  promotionLocalForm.value.city = regionList.value[1][e.detail.value[1]].name;
  promotionLocalForm.value.page = 1;
  uni.setStorageSync('editLocation', 1);
  queryPromotionLocal();
}
// 跳转内页
const toPath = url => {
  if (uni.getStorageSync('token')) {
    if (url === '/pagesA/lawyer/openingPrivateLawyer' && (userInfo.value.vip.individual > 0 || userInfo.value.vip
      .corporate > 0)) {
      api.lawyer.getChatterId({
        position: 1
      }).then(res => {
        handleJumpToChat(res.chatter_id, 1);
      }).catch(err => {
        if (err.msg) {
          uni.showToast({
            title: err.msg,
            icon: 'none',
            mask: true
          });
        }
      });
      return
    }
  }
  uni.navigateTo({
    url
  });
}
const goto = item => {
  if (item.types == 1) {
    uni.navigateTo({
      url: `/pagesA/lawyer/detail?id=${item.l_id}`
    });
  } else {
    // uni.navigateTo({ url: `/pages/init/skipPage?url=https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx0acc05bdb154431e&redirect_uri=http://api.fahuren.com/api/index/index&response_type=code&scope=snsapi_base&state=123#wechat_redirect` })


    uni.navigateTo({ url: `/pages/init/skipPage?url=${item.uri}` })

  }


}

// 首页明星律师
const queryPromotionRound = () => {
  api.lawyer.queryPromotionRound().then(res => {
    starLawyerList.value = res;
  });
}
// 本地名律接口
const queryPromotionLocal = () => {
  api.lawyer.queryPromotionLocal(promotionLocalForm.value).then(res => {
    lawyerList.value = promotionLocalForm.value.page === 1 ? res.data : lawyerList.value.concat(res
      .data);
    promotionLocalForm.value.last_page = res.last_page;
  });
}


// 法律看点 getNews?types=
const getNews = () => {
  api.lawyer.getNews(newForm.value).then(res => {
    dailyStudyList.value = newForm.value.page === 1 ? res.data : dailyStudyList.value.concat(res
      .data);
    newForm.value.last_page = res.last_page;
  });
}
onLoad(options => {
  if (options.q) {
    uni.setStorageSync('in_user_id', unescape(options.q).split('in_user_id=')[1]);
  }
  getArea();
});
onShow(() => {
  init();
});
onReachBottom(() => {
  if (promotionLocalForm.value.page < promotionLocalForm.value.last_page) {
    promotionLocalForm.value.page += 1;
    queryPromotionLocal();
  }
});
onPullDownRefresh(() => {
  init();
  setTimeout(() => {
    uni.stopPullDownRefresh();
  }, 1000);
});
</script>

<style lang="less" scoped>
.container-main {
  padding: 20rpx 24rpx 24rpx;
}

.notice-list {
  width: 526rpx;
  height: 64rpx;
  background: #f6f6f6;
  border-radius: 8rpx;
  overflow: hidden;
  padding: 0 16rpx;

  image {
    width: 40rpx;
    height: 40rpx;
  }

  swiper {
    width: 580rpx;
    height: 64rpx;

    .notice-item {
      height: 64rpx;
      line-height: 64rpx;
    }
  }
}

.location-picker {
  image {
    width: 40rpx;
    height: 40rpx;
    margin-right: 4rpx;
  }

  .location-picker-label {
    max-width: 120rpx;
    color: #333;
  }
}

.banner-list {
  margin-bottom: 24rpx;

  swiper-item {
    image {
      width: 702rpx;
      height: 292rpx;
      border-radius: 12rpx;
    }
  }
}

.home-img-menu {
  height: 276rpx;
  margin-bottom: 48rpx;

  image {
    &:nth-child(1) {
      width: 284rpx;
      height: 276rpx;
      margin-right: 16rpx;
    }

    &:nth-child(2),
    &:nth-child(3) {
      width: 402rpx;
      height: 130rpx;
    }
  }
}

.home-img-text-menu {
  padding-bottom: 32rpx;

  view {
    width: 25%;
    margin-bottom: 24rpx;

    image {
      width: 96rpx;
      height: 96rpx;
    }

    text {
      color: #333;
    }
  }
}

.home-legal-advice {
  margin-bottom: 24rpx;

  image {
    width: 100%;
    height: 120rpx;
  }
}

.title {
  margin-bottom: 24rpx;

  .more {
    .more-label {
      color: #636363;
    }
  }
}

.star-lawyer-list {
  margin-bottom: 48rpx;
  white-space: nowrap;

  .star-lawyer-item {
    display: inline-block;
    margin-right: 28rpx;

    &:last-child {
      margin-right: 0;
    }

    .star-lawyer-img {
      position: relative;
      width: 280rpx;
      height: 280rpx;
      margin-bottom: 24rpx;

      image {
        width: 100%;
        height: 100%;
        border-radius: 24rpx;
      }

      .star-lawyer-city {
        position: absolute;
        left: 0;
        bottom: 24rpx;
        z-index: 10;
        height: 44rpx;
        border-radius: 0px 8rpx 8rpx 0px;
        padding: 0 16rpx;
        line-height: 44rpx;
        color: #fff;
      }
    }

    .star-lawyer-name {
      margin-bottom: 8rpx;
      color: #333;
    }

    .star-lawyer-desc-left {
      color: #999;
    }

    .star-lawyer-desc-right {
      color: #f9594d;
      align-items: baseline;
    }
  }
}

.lawyer-list {
  .lawyer-item {
    border-bottom: 1px solid #e2dfdf9c;
    padding-bottom: 22rpx;
    margin-bottom: 22rpx;
    position: relative;

    .lawyer-avatar {
      width: 220rpx;
      height: 136rpx;
      border-radius: 16rpx;
      margin-right: 20rpx;
    }

    .lawyer-info {
      height: 136rpx;
      // width: 465rpx;
      width: 100%;
      .lawyer-name {
        color: #333;

        text {
          height: 36rpx;
          padding: 0 8rpx;
          background: #f6f6f6;
          border-radius: 4rpx;
          margin-left: 8rpx;
          line-height: 36rpx;
        }
        .date-st {
          color: #999;
          font-weight: 400;
          width: 70%;
          font-size: 24rpx;
        }
        .right-st {
          width: 30%;
          justify-content: flex-end;
        }
      }

      .lawyer-life {
        color: #999;
      }

      .lawyer-price {
        color: #f9594d;
        align-items: baseline;
      }
    }

    .lawyer-consult {
      position: absolute;
      right: 0;
      top: 48rpx;
      width: 64rpx;
      height: 64rpx;
    }
  }
}
.img-st {
  height: 100%;
  width: 100%;
}
::v-deep .u-section {
  .u-section__title__text {
    font-size: 36rpx;
  }
}
</style>
<style>
page {
  background: #fff;
}
</style>